<template>
  <div class="album-box">
    <div class="album-item" v-for="item in list" :key="item.id">
      <router-link
        tag="div"
        :title="item.name"
        href="javascript:void(0)"
        class="img"
        @click="send(list)"
        :to="'/album/' + item.id"
      >
        <img style="width: 130px; height: 130px" :src="item.picUrl" alt="" />
        <span class="msk"></span>
      </router-link>

      <div class="author">
        <p>{{ item.name }}</p>
        <p>{{ item.artist.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'albumlist',
  props: ['list'],
}
</script>

<style scoped lang="less">
.album-box {
  display: flex;
  flex-wrap: wrap;
}
.album-item {
  cursor: pointer;
  position: relative;
  margin-top: 20px;
  display: flex;
  width: 20%;
  flex-direction: column;
}
.author p:nth-child(1) {
  font-size: 14px;
  line-height: 20px;
}
.author p:nth-child(2) {
  color: #0c73c2;
  font-size: 12px;
  line-height: 20px;
}
.msk {
  width: 153px;
  position: absolute;
  top: 0;
  left: 0;
  height: 130px;
  background: url(../assets/images/coverall.png) 0 -845px no-repeat;
}
</style>